<template>
  <design-dialog
      wrapClassName="dialog-images-manager"
      title="选择专题"
      :visible="visible"
      width="1000px"
      @isOk="handle_confirm"
      @isCancel="handle_cancel">

    <!-- dialog-body -->
    <div style="height:50vh;overflow:auto">

      <!--CPS-->
      <a-tabs v-model="active" @change="callback">
        <!--<a-tab-pane key="1" tab="品牌券商品">-->
          <!--<a-input-search-->
              <!--v-model.trim="keywords"-->
              <!--placeholder="请输入商品名称进行搜索（多规格商品不支持一键下单）  直接点击搜索可显示全部商品"-->
              <!--enter-button="搜索"-->
              <!--@search="currentChange(1)"-->
          <!--/>-->
          <!--<a-table class="goods_tab"-->
                   <!--:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio'}"-->
                   <!--:columns="other_columns" :rowKey="(record,index)=>{return index}"-->
                   <!--:data-source="main_page_list"-->
                   <!--:pagination="{-->
                      <!--pageSize: main_page_pagination.pageSize,-->
                      <!--current: main_page_pagination.current,-->
                      <!--total: main_page_pagination.total,-->
                      <!--showQuickJumper: true,-->
                      <!--onChange: currentChange-->
                  <!--}"-->
          <!--&gt;-->
            <!--<div slot="goods_img" class="goods_img" slot-scope="text, record">-->
              <!--<img :src="record.logo"/>-->
            <!--</div>-->
          <!--</a-table>-->
        <!--</a-tab-pane>-->
        <a-tab-pane key="1" tab="京东商品资源" force-render>
          <a-table class="goods_tab"
                   :row-selection="{ selectedRowKeys: selectedRowKeys_brand, onChange: onSelectChangeBrand, type: 'radio'}"
                   :columns="good_columns" :rowKey="(record,index)=>{return index}"
                   :data-source="main_page_list_brand"
                   :pagination="false"
          >
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="拼多多商品资源" force-render>
          <a-table class="goods_tab"
                   :row-selection="{ selectedRowKeys: selectedRowKeys_brand, onChange: onSelectChangeBrand, type: 'radio'}"
                   :columns="good_columns" :rowKey="(record,index)=>{return index}"
                   :data-source="main_page_list_brand"
                   :pagination="false"
          >
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="3" tab="淘宝商品资源" force-render>
          <a-table class="goods_tab"
                   :row-selection="{ selectedRowKeys: selectedRowKeys_brand, onChange: onSelectChangeBrand, type: 'radio'}"
                   :columns="good_columns" :rowKey="(record,index)=>{return index}"
                   :data-source="main_page_list_brand"
                   :pagination="false"
          >
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!--<div style="position: absolute;bottom: 80px;left: 50%;transform: translateX(-50%);">-->
      <!--<a-pagination-->
          <!--style="margin-top: 15px;text-align: center"-->
          <!--showQuickJumper-->
          <!--:pageSize="main_page_pagination.pageSize"-->
          <!--:current="main_page_pagination.current"-->
          <!--:total="main_page_pagination.total"-->
          <!--@change="currentChange"/>-->
    <!--</div>-->

  </design-dialog>
</template>

<script>
	// const other_columns = [
	// 	{title: '商品ID', align: 'center', dataIndex: 'goods_id', },
	// 	{title: '第三方ID', align: 'center', dataIndex: 'b_id',},
	// 	{
	// 		title: '商品logo',
	// 		align: 'center',
	// 		dataIndex: 'logo',
	// 		scopedSlots: {customRender: 'goods_img'}
	// 	},
	// 	{title: '商品名', align: 'center', dataIndex: 'name', width: 350,},
	// ];

	const good_columns = [
		{title: '商品type', align: 'center', dataIndex: 'type', },
		{title: '资源类型', align: 'center', dataIndex: 'name',},
	];

	export default {
		name: 'link-modal',

		props: {
			value: {
				type: String,
				default: ""
			},
			// 配置项
			config: {
				type: Object,
				required: true,
			},
			// 根配置
			rootConfig: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				// other_columns,
				good_columns,

        //门店装修标识
				is_from: '',
        choose_store: false,

				page_sort: '',
				active: '1',
				local_link: '',
				visible: false,
        chooseKey: {},

        //商品列表
				selectedRowKeys: [],
				keywords: '',
				main_page_list: [],
				// 主分页的页码
				main_page_pagination: {
					current: 1,
					pageSize: 20,
					total: 0
				},

				//品牌列表
				selectedRowKeys_brand: [],
				keywords_brand: '',
				main_page_list_brand: [],
				// 主分页的页码
				main_page_pagination_brand: {
					current: 1,
					pageSize: 20,
					total: 0
				},
			};
		},
    mounted() {
			if(this.fun.getKey('store_id') && window.location.href.indexOf('store_design') > -1) {
				this.is_from = 'store';
      }
    },
		methods: {
			show (str) {
				this.active = '1';
				this.local_link = '';
				this.selectedRowKeys = [];
				this.selectedRowKeys_brand = [];
				this.visible = true;
				if(str) {
					this.page_sort = str;
        }
        this.currentChange(1)
			},
			/**
			 * 弹窗按钮 - 确认
			 */
			handle_confirm () {
				let link = '';
				switch(this.active) {
					// case '1':
					// 	link = `brand`;
					// 	break;
					case '1':
						link = `jd`;
						break;
					case '2':
						link = `pdd`;
						break;
					case '3':
						link = `tb`;
						break;
					default:
						return '';
				}
				this.chooseKey.chooseTab = link;
				this.$emit('confirm', this.chooseKey);
				this.visible = false;
			},

			onSelectChange(selectedRowKeys,selectedRows) {
				this.selectedRowKeys = selectedRowKeys;
				this.chooseKey = selectedRows[0];
			},
			onSelectChangeBrand(selectedRowKeys,selectedRows) {
				this.selectedRowKeys_brand = selectedRowKeys;
				this.chooseKey = selectedRows[0];
      },
			currentChange(page) {
				this.main_page_pagination.current = page;
				let url = "";
        // if(this.active == 1) {
					// url = "plugin.aggregation-cps.admin.equity-goods.searchBrandGoods";
        // }else {
					url = "plugin.aggregation-cps.admin.web.getSpecialList";
        // }
				$http
						.post(url,{
							page: page,
							keyword: this.keywords,
							pageSize: 20,
							divide_page: 1
						},"loading")
						.then(response => {
							if (response.result === 1) {
                // if(this.active == 1) {
									// this.main_page_pagination.total = response.data.total;
									// this.main_page_pagination.pageSize = response.data.per_page;
									// this.main_page_list = response.data.data;
                // }else
                if(this.active == 1) {
									this.main_page_list_brand = response.data.jd_special_url_type
                }else if(this.active == 2) {
									this.main_page_list_brand = response.data.pdd_special_url_type
								}else if(this.active == 3) {
									this.main_page_list_brand = response.data.taobao_special_url_type
								}

							} else {
								this.main_page_list = [];
								if (response.data.status === -1) {
									this.currentChange(1);
								}
								// this.$message.error(response.msg);
							}
						})
						.catch(err => {
							console.error(err);
						});
			},
			callback() {
				this.selectedRowKeys = [];
				this.selectedRowKeys_brand = [];
				this.currentChange(1);
      },

			/**
			 * 弹窗按钮 - 取消
			 */
			handle_cancel () {
				this.visible = false;
			},
		},
	};
</script>

<style lang="less" scoped>
  .link-box {
    margin: 10px 10px;
    .title {
      position: relative;
      font-weight: bold;
      margin-left: 10px;
      color: #29ba9c;
      font-size: 15px;
    }
    .title::before {
      content: "";
      width: 5px;
      height: 20px;
      position: absolute;
      top: 0;
      left: -10px;
      background: #29ba9c;
    }
    .links {
      margin-left: 15px;
      display: flex;
      flex-wrap: wrap;
      font-size: 15px;
      span {
        cursor: pointer;
        margin: 10px 0 0 20px;
      }
      span.active {
        color: #29ba9c;
        font-weight: bold;
      }
    }
  }

  .search-result {
    margin-top: 20px;
  }

  .goods_tab {
    margin-top: 15px;
    // 序号
    .number {
      width: 80px;
      margin-left: 10px;
    }

    .goods_img {
      height: 60px;
      line-height: 60px;

      & > img {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
      }
    }

    .ant-checkbox-wrapper, .ant-checkbox-wrapper + .ant-checkbox-wrapper {
      margin-right: 0px !important;
    }
  }

  .replace-goods-wrap {
    padding-right: 22px;

    .title {
      margin-bottom: 6px;
    }

    .img {
      margin-top: 12px;
      margin-bottom: 6px;
    }

    .goods_image {
      height: 440px;

      & > img {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
      }
    }
  }

  .gray {
    font-size: 12px;
    color: #adadad;
  }

  .ml {
    margin-left: 10px;
  }
</style>
